<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>520</title>

    <style>
        html,body{
            padding: 0;
            margin: 0;
            background-color: skyblue;
        }
        .tab{
         width: 100%;

        }
        .tt{
            display: flex;
 
        }
        .tt>span{
     width: 30%;
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-size: 14px;
            color: white;
        }
        .tt>.cur{
 
            color: azure;
        }
        .tc{
        
            display: none;
        }
        .show{
            display: block;
           
        }
        .dddd ul{
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }
        .dddd ul li{
            width: 100%;
            padding: 0;
            margin: 0;margin-bottom: 18px;


        }
        li{
            list-style: none;
text-decoration: none;
background-color: white;

  
        }
        img{
            width: 100%; padding: 0;
            margin: 0;
        }
        p{
            font-size: 20px;
        }
        
    </style>
</head>
<body>
    <div class="tab">
        <div class="tt">
            <span class="cur">点点滴滴</span>
            <span>婷</span>
            <span>元</span>

        </div>
        <div class="tc show">
<div class="dddd">

<ul>  
    
    <li>
        <p>2022.5.28 第一次坐上我的副驾</p>
        <img src="./img/2022.5.28hz/3.jpg" alt="">
        <img src="./img/2022.5.28hz/2.jpg" alt="">
        <img src="./img/2022.5.28hz/1.jpg" alt="">
        <img src="./img/2022.5.28hz/4.jpg" alt="">
        <img src="./img/2022.5.28hz/5.jpg" alt="">
        <img src="./img/2022.5.28hz/6.jpg" alt="">

  
    </li>
    <li>
        <p>2022.5.28山人集</p>
        <img src="./img/2022.5.28hz/7.jpg" alt="">
        <img src="./img/2022.5.28hz/8.jpg" alt="">
        <img src="./img/2022.5.28hz/9.jpg" alt="">
        <img src="./img/2022.5.28hz/10.jpg" alt="">
        <img src="./img/2022.5.28hz/11.jpg" alt="">
        <img src="./img/2022.5.28hz/12.jpg" alt="">
        <img src="./img/2022.5.28hz/13.jpg" alt="">
        <video width="100%" controls autoplay>
            <source src="./img//2022.5.28hz/2022.5.28.1.mp4" type="video/mp4">
       
            您的浏览器不支持 video 属性。
          </video>
    </li>
    <li>
        <p>2022.5.27星海公园</p>
<img src="./img/hz/1.jpg" alt="">
<img src="./img//hz//2.jpg" alt="">
<img src="./img//hz//3.jpg" alt="">
<img src="./img//hz//13.jpg" alt="">
<img src="./img//hz//14.jpg" alt="">
<img src="./img//hz//15.jpg" alt="">
<img src="./img//hz//16.jpg" alt="">
<img src="./img//hz//17.jpg" alt="">
<img src="./img//hz//18.jpg" alt="">
<img src="./img//hz//19.jpg" alt="">
<img src="./img//hz//20.jpg" alt="">
<img src="./img//hz//21.jpg" alt="">

    </li>

    <li>
<p>2022.5.27圣亚海洋世界</p>
<img src="./img//hz//4.jpg" alt="">
<img src="./img//hz//5.jpg" alt="">
<img src="./img//hz//6.jpg" alt="">
<img src="./img//hz//7.jpg" alt="">
<img src="./img//hz//12.jpg" alt="">
<img src="./img//hz//8.jpg" alt="">
<img src="./img//hz//9.jpg" alt="">
<img src="./img//hz//10.jpg" alt="">
<img src="./img//hz//11.jpg" alt="">
<img src="./img//hz//12.jpg" alt="">

    </li>
    <li>
        <p>2022.5.25星海+凯泰</p>
        <img src="./img//hz/23.jpg" alt="">
        <img src="./img//hz/24.jpg" alt="">
        <img src="./img//hz/25.jpg" alt="">
        <img src="./img//hz/26.jpg" alt="">
        <img src="./img//hz/27.jpg" alt="">
        <img src="./img//hz/28.jpg" alt="">
  
    </li>
      
</ul>

</div>


        </div>
        <div class="tc">2</div>
        <div class="tc">3</div>

    </div>
 
     <script src="./tab.js"></script>

</body>
</html>